<template>
    <div class="menu_pane">
        <el-menu
            ellipsis
            class="el-menu-popper-demo"
            mode="horizontal"
             :ellipsis="false"
            :popper-offset="16"
            style="min-width: 600px"
        >
            <template v-for="item in menuData" :key="item.index">
                <!-- Logo -->
                <el-menu-item v-if="item.type === 'logo'" :index="item.index">
                <img
                    style="width: 30px; height: 30px;"
                    src='@/assets/logo.png'
                    :alt="item.alt"
                />
                </el-menu-item>

                <!-- 普通菜单项 -->
                <el-menu-item 
                    v-else-if="item.type === 'item'" 
                    :index="item.index"
                    :disabled="item.disabled"
                     @click="handleItemClick(item)"
                >
                {{ item.name }}
                </el-menu-item>

                <!-- 子菜单 -->
                <el-sub-menu 
                v-else-if="item.type === 'submenu'" 
                :index="item.index"
                :popper-offset="item.popperOffset"
                >
                <template #title>
                    {{ item.name }}
                </template>
                
                <!-- 递归渲染子菜单 -->
                <menu-children
                    @menu-click="handleChildMenuClick" 
                    :children="item.children" />
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>
<script setup>
import { defineComponent,reactive, ref, unref, h, onMounted, nextTick, computed, getCurrentInstance,defineEmits } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { menuData } from './menuData.js'
import MenuChildren from './MenuChildren.vue'

const meunList=ref([
    {index:1,path:'',name:'首页'},
    {index:2,path:'',name:'用户管理'},
    {}
])

// 处理菜单项点击
const handleItemClick = (item) => {
  if (item.path && !item.disabled) {
    // 发射事件给父组件，传递路径数据
    emit('menuRouter', {
      path: item.path,
      index: item.index,
      name: item.name,
      type: item.type
    })
  }
}

// 处理子菜单的点击事件
const handleChildMenuClick = (menuData) => {
  // 将子组件的点击事件继续向上传递
 // emit('menu-click', menuData)
   emit('menuRouter',menuData)
}

// 定义发射的事件
const emit = defineEmits(['menuRouter']);

// 发送消息给父组件
const sendMessageToParent = (menu) => {
  emit('menuRouter',menu)
}

</script>